<!--修改密码的弹窗组件 -->

<template>
    <div>
        <el-dialog title="修改密码" :visible.sync = dialogFormVisible :show-close = false :close-on-click-modal= false>
             <el-form label-position="top" :model="ruleForm" :status-icon=true :rules="rules" label-width="100px" ref = "ruleForm">
                 <el-form-item label="原密码" prop="oldPassword">
                     <el-input v-model="ruleForm.oldPassword" placeholder="输入原登录密码" show-password></el-input>
                 </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                   <el-input v-model="ruleForm.newPassword" placeholder="密码长度不少于6位" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="ruleForm.checkPass"  placeholder="再次输入修改密码" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {modifyPwd} from "../../api/login";

export default {
    name: "modifypwd",
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else if( value === '88888888'|| value.length < 6){
                callback(new Error('密码过于简单'))
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.newPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入原密码'));
            } else {
                callback();
            }
        };
        return {
            dialogFormVisible: false,
            ruleForm: {
                username: localStorage.getItem("username"),
                usertype: localStorage.getItem("userType"),
                oldPassword: '',
                newPassword: '',
                checkPass: '',
            },
            rules: {
                oldPassword: [
                    { validator: validatePass3,trigger: 'blur'}
                ],
                newPassword: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },
        };
    },
    methods: {
        cancel(){
            this.$refs.ruleForm.resetFields();
            this.dialogFormVisible = false;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) {
                    this.$message.error("输入不符合规范，请检查输入");
                }else{
                    //this.$message.success("修改密码成功！！！");
                    modifyPwd(this.ruleForm.username , this.ruleForm.oldPassword,this.ruleForm.newPassword, this.ruleForm.usertype).then((res) => {
                        if (res.data !== "success") {
                            this.$message.error("修改密码失败！");
                        } else {
                            this.$message.success("修改密码成功！");
                            this.dialogFormVisible = false
                            this.$store.state.needModifyPwd = false
                        }
                    })
                    this.$refs.ruleForm.resetFields();
                    this.dialogFormVisible = false;
                }
            });

        },
        open(){
            this.ruleForm.password = '';
            this.ruleForm.checkPass = '';
            this.dialogFormVisible = true;
        },
    },
}

</script>

<style scoped>
.home-wrap {
    height: 100%;
    width: 100%;
}
@import url("//unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css");
</style>
